#message_contain {
  width: 100%;
  height: 100%;
  max-width: 1400px;
}
.messsagebox {
  margin: 20px 0px;
  height: calc(100% - 40px);
  width: 100%;

  .mseleft {
    flex: 1;
    background: white;
    padding: 20px;
    .el-textarea {
      margin: 15px 0px;
    }
    .btubox {
      display: flex;
      margin-bottom: 10px;
      justify-content: space-between;
      .btu_left {
        display: flex;
        .img_box {
          margin-right: 20px;
          position: relative;
          .emoji {
            position: absolute;
            bottom: 50px;
            left: 0px;
          }
        }
        .imgbox {
          display: inline-block;
          vertical-align: middle;
          position: relative;
          img {
            border-radius: 5px;
            width: 38px;
            // margin-right: 5px;
            vertical-align: top;
            // filter: blur(1px);
          }
          .select-img {
            width: 35px;
            height: 35px;
            user-select: none;
          }
          img:hover {
            cursor: pointer;
          }
          span {
            line-height: 40px;
            height: 40px;
            padding-left: 15px;
            padding-right: 10px;
            color: rgb(192, 190, 190);
          }
          .avatars_box {
            position: absolute;
            top: -160px;
            left: 0;
            width: 300px;
            height: 150px;
            padding: 0px;
            box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.3);
            display: flex;
            flex-wrap: wrap;
            background: white;
            border-radius: 5px;
            div {
              width: 25%;
              padding: 10px;
              box-sizing: border-box;
              img {
                width: 100%;
                height: 100%;
                object-fit: cover;
              }
            }
          }
          .active {
            opacity: 1;
          }
        }
      }
    }
    .searchbox {
      margin-top: 20px;
    }
    .titlebox {
      position: relative;
      height: 50px;
      width: 200px;
      .color {
        position: absolute;
        height: 20px;
        width: 10px;
        background: $ar_color;
        top: 0px;
        left: -20px;
        z-index: 1;
      }
    }
  }
  .mseright {
    flex: 1;
    padding: 0px 10px;
    padding-top: 60px;
    position: relative;
    background: white;
    border-top: 10px solid #f5f5f5;
    .boxtitle {
      background: white;
      width: 100px;
      border-radius: 5px;
      text-align: center;
      height: 40px;
      line-height: 40px;
      position: absolute;
      top: 10px;
      left: 10px;
      font-weight: bold;
      font-size: 18px;
      box-shadow: 0 5px 8px rgba(10, 16, 20, 0.24),
        0 0 8px rgba(10, 16, 20, 0.12);
    }
    .scrollbox {
      height: calc(100% - 10px);
      .el-card {
        width: calc(100% - 40px);
        margin: 10px 20px;
        /deep/ .el-card__header {
          padding: 10px 20px;
          border-bottom: none;
        }
        /deep/ .el-card__body {
          padding: 5px 20px 20px;
          padding-left: 80px;
          box-sizing: border-box;
        }
        .clearfix {
          display: flex;
          .img_box {
            margin-right: 10px;
            img {
              height: 50px;
              width: 50px;
              border-radius: 5px;
              object-fit: cover;
              overflow: hidden;
            }
          }
          .userName {
            height: 25px;
            line-height: 25px;
            font-size: 16px;
            font-weight: bold;
            color: $ar_color;
          }
          .adminName {
            color: rgb(50, 132, 170);
          }
          .date {
            color: rgb(102, 102, 102);
            font-size: 15px;
            height: 25px;
            line-height: 25px;
          }
        }
        .msgcont {
          font-size: 15px;
          color: rgb(91, 95, 95);
          word-break: break-all;
          line-height: 20px;
        }
        .admincont {
          color: rgb(47, 49, 49);
        }
      }
    }
  }
}
.icon {
  position: relative;
  .emoji-panel-btn {
    display: inline-block;
    height: 35px;
    width: 35px;
    vertical-align: middle;
    &:hover {
      cursor: pointer;
      opacity: 0.8;
    }
  }
  .iconfont {
    cursor: pointer;
    color: #f7ba2a;
    vertical-align: bottom;
  }
  .emoji-box {
    position: absolute;
    z-index: 10;
    left: 20px;
    top: -215px;
    box-shadow: 0 4px 20px 1px rgba(0, 0, 0, 0.2);
    background: white;
    .btn {
      position: absolute;
      border: none;
      right: 5px;
      top: 5px;
      z-index: 10;
    }
    .btn:hover {
      cursor: pointer;
      color: red;
    }
    .arrow {
      left: 10px;
    }
  }
}
.messsagebox > div {
  flex: 1;
}
.c_opera {
  text-align: right;
  i {
    color: rgb(194, 194, 194);
    margin-left: 15px;
  }
  i:hover {
    cursor: pointer;
  }
}
.childcomt {
  margin: 10px 0px;
  padding: 10px;
  border-left: 4px solid #ececec;
  box-sizing: border-box;
  .child_item {
    margin: 10px 0px;
    padding-bottom: 5px;
  }
  .child_item:not(:first-child) {
    padding-top: 15px;
  }
  .namebox {
    display: flex;
    span {
      font-size: 15px;
      color: rgb(177, 175, 175);
    }
    .child_avatars {
      height: 50px;
      width: 50px;
      overflow: hidden;
      margin-right: 10px;
      img {
        height: 100%;
        width: 100%;
        object-fit: cover;
        border-radius: 5px;
      }
    }
    .child_info {
      .from {
        height: 25px;
        line-height: 25px;
      }
      .c_time {
        height: 25px;
        line-height: 25px;
        font-size: 13px;
        color: rgb(85, 85, 85);
      }
    }
  }
  .c_content {
    line-height: 25px;
    margin: 10px 0px;
    margin-left: 60px;
    font-size: 14px;
    vertical-align: middle;
    color: rgb(121, 121, 121);
  }
  .c_other {
    margin-left: 20px;
    text-align: right;
    i {
      color: rgb(194, 194, 194);
      margin-left: 15px;
    }
    i:hover {
      cursor: pointer;
    }
  }
}
.active {
  color: $ar_color !important;
}
i {
  font-style: normal;
}
.contbox {
  vertical-align: middle;
}
@media (max-width: 600px) {
  .messsagebox {
    margin: 0px;
    height: 100%;
    width: 100%;

    .mseleft {
      .titlebox {
        text-indent: 10px;
        .color {
          left: -10px;
        }
      }
    }
    .mseright {
      .scrollbox {
        height: calc(100% - 10px);
        .el-card {
          width: calc(100% - 0.625rem);
          margin: 0.625rem 0.3125rem;
          /deep/ .el-card__header {
            padding: 10px 20px;
            border-bottom: none;
          }
          /deep/ .el-card__body {
            padding: 5px 20px 20px;
            padding-left: 80px;
            box-sizing: border-box;
          }
          .clearfix {
            display: flex;
            .img_box {
              margin-right: 10px;
              img {
                height: 50px;
                width: 50px;
                border-radius: 5px;
                object-fit: cover;
                overflow: hidden;
              }
            }
            .userName {
              height: 25px;
              line-height: 25px;
              font-size: 16px;
              font-weight: bold;
              color: $ar_color;
            }
            .adminName {
              color: rgb(50, 132, 170);
            }
            .date {
              color: rgb(102, 102, 102);
              font-size: 15px;
              height: 25px;
              line-height: 25px;
            }
          }
          .msgcont {
            font-size: 15px;
            color: rgb(91, 95, 95);
            word-break: break-all;
            line-height: 20px;
          }
          .admincont {
            color: rgb(47, 49, 49);
          }
        }
      }
    }
  }
  .icon {
    position: relative;
    .emoji-panel-btn {
      display: inline-block;
      height: 35px;
      width: 35px;
      vertical-align: middle;
      &:hover {
        cursor: pointer;
        opacity: 0.8;
      }
    }
    .iconfont {
      cursor: pointer;
      color: #f7ba2a;
      vertical-align: bottom;
    }
    .emoji-box {
      position: absolute;
      z-index: 10;
      left: 20px;
      top: -215px;
      box-shadow: 0 4px 20px 1px rgba(0, 0, 0, 0.2);
      background: white;
      .btn {
        position: absolute;
        border: none;
        right: 5px;
        top: 5px;
        z-index: 10;
      }
      .btn:hover {
        cursor: pointer;
        color: red;
      }
      .arrow {
        left: 10px;
      }
    }
  }
  .messsagebox > div {
    flex: 1;
  }
  .c_opera {
    text-align: right;
    i {
      color: rgb(194, 194, 194);
      margin-left: 15px;
    }
    i:hover {
      cursor: pointer;
    }
  }
  .childcomt {
    margin: 10px 0px;
    padding: 10px;
    border-left: 4px solid #ececec;
    box-sizing: border-box;
    .child_item {
      margin: 10px 0px;
      padding-bottom: 5px;
    }
    .child_item:not(:first-child) {
      padding-top: 15px;
    }
    .namebox {
      display: flex;
      span {
        font-size: 15px;
        color: rgb(177, 175, 175);
      }
      .child_avatars {
        height: 50px;
        width: 50px;
        overflow: hidden;
        margin-right: 10px;
        img {
          height: 100%;
          width: 100%;
          object-fit: cover;
          border-radius: 5px;
        }
      }
      .child_info {
        .from {
          height: 25px;
          line-height: 25px;
        }
        .c_time {
          height: 25px;
          line-height: 25px;
          font-size: 13px;
          color: rgb(85, 85, 85);
        }
      }
    }
    .c_content {
      line-height: 25px;
      margin: 10px 0px;
      margin-left: 60px;
      font-size: 14px;
      vertical-align: middle;
      color: rgb(121, 121, 121);
    }
    .c_other {
      margin-left: 20px;
      text-align: right;
      i {
        color: rgb(194, 194, 194);
        margin-left: 15px;
      }
      i:hover {
        cursor: pointer;
      }
    }
  }
  .active {
    color: $ar_color !important;
  }
  i {
    font-style: normal;
  }
  .contbox {
    vertical-align: middle;
  }
}

.from {
  margin-right: 10px;
  color: $ar_color !important;
  font-weight: bold;
  display: flex;
  align-items: center;
}
.to {
  color: $ar_color !important;
  margin-right: 10px;
  font-weight: bold;
  font-size: 15px;
}
.isAdmin {
  color: white;
  background: #3d9eca !important;
  font-size: 10px;
  padding: 0px 5px;
  height: 20px;
  line-height: 20px;
  border-radius: 5px;
  margin-left: 5px;
}
/deep/ .el-button--primary {
  background-color: $ar_color;
  border-color: $ar_color;
}
/deep/ .el-textarea__inner:focus {
  border-color: $ar_color;
}
/deep/ .el-input__inner:focus {
  border-color: $ar_color;
}
/deep/ .el-loading-spinner i {
  color: $ar_color !important;
}
/deep/ .el-loading-text {
  color: $ar_color !important;
}
